<template>
  <div class="ywj_home_container">
    <div class="ywj_top_container">
      <Header></Header>
    </div>
    <div class="ywj_hidden"></div>
    <van-tabs v-model="active" @click="onClick">
      <van-tab name="全部" title="全部"></van-tab>
      <van-tab name="精华" title="精华"></van-tab>
      <van-tab name="分享" title="分享"></van-tab>
      <van-tab name="问答" title="问答"></van-tab>
      <van-tab name="招聘" title="招聘"></van-tab>
      <van-tab name="客户端测试" title="客户端测试"></van-tab>
    </van-tabs>
    <Goods v-for="(item, index) in showList" :key="index" :item="item"></Goods>
    <div class="ywj_backtop" @click="onBackTop">
      回到顶部
    </div>
  </div>
</template>

<script>

import Header from "../components/Header"; 
import Goods from "../components/Goods";
export default {
  name: "Home",
  components: {
    Header,
    Goods,
  },
  data() {
    return {
      active: "全部",
      list: [], 
      showList: [], 
    };
  },
  mounted() {

    this.$axios.get("http://localhost:8080/list.json").then((res) => {

      var temp = res.data.data;
      temp.forEach((ele) => {
        if (ele.tab == "share") {
          ele.tab = "分享";
        } else if (ele.tab == "ask") {
          ele.tab = "问答";
        }
        this.list.push(ele);
      });
      console.log(this.list);
      this.showList = this.list;
    });
    var actives = localStorage.getItem("active");
    if(actives){
      this.active = actives;
    }
  },
  methods: {
    onClick(key) {

      this.active = key;
      localStorage.setItem("active",this.active)
      console.log(key);
      this.showList = [];
      switch (this.active) {
        case "全部":
          this.showList = this.list;
          break;
        case "精华":
          this.list.forEach((ele) => {
            if (ele.tab == "精华") {
              this.showList.push(ele);
            }
          });
          break;
        case "精华":
          this.list.forEach((ele) => {
            if (ele.tab == "精华") {
              this.showList.push(ele);
            }
          });
          break;
        case "分享":
          this.list.forEach((ele) => {
            if (ele.tab == "分享") {
              this.showList.push(ele);
            }
          });
          break;
        case "问答":
          this.list.forEach((ele) => {
            if (ele.tab == "问答") {
              this.showList.push(ele);
            }
          });
          break;
          case "招聘":
          this.list.forEach((ele) => {
            if (ele.tab == "招聘") {
              this.showList.push(ele);
            }
          });
          break;
          case "客户端测试":
          this.list.forEach((ele) => {
            if (ele.tab == "客户端测试") {
              this.showList.push(ele);
            }
          });
          break;
        default: this.showList = this.list;
          break;
      }
    },
    onBackTop(){
      scrollTo(0,0)
    }
  },
};
</script>
<style lang="scss" scoped>
.ywj_top_container {
  width: 100%;
  height: 18vh;
  position: fixed;
  left: 0;
  top: 0;
  z-index: 999;
}
.ywj_hidden {
  width: 100%;
  height: 18vh;
}
.ywj_backtop{
  width: 5%;
  height: 70px;
  background: whitesmoke;
  font-size: 12px;
  position: fixed;
  bottom: 10%;
  right: 0;
  border-radius: 6px 0 0 6px;
}
</style>
